<template>
	<div>
	<el-row style="padding-top: 20px;">
	    <el-col :span="24">
	        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
	            <el-form-item>
	                <el-select v-model="type" style="width: 120px;" @change="changeType">
	                    <el-option label="用户ID" value="userId"></el-option>
	                    <el-option label="注册手机号" value="userNum"></el-option>
	                </el-select>
	                <el-input v-model="formInline.name" style="width: 150px;"></el-input>
	            </el-form-item>
	            <el-form-item label="按认证状态:">
	                <el-col :span="18">
	                    <el-select v-model="formInline.userStat">
	                        <el-option label="全部" value=""></el-option>
	                        <el-option v-for="item in formActStatList" :label="item.label" :value="item.value"></el-option>
	                    </el-select>
	                </el-col>

	            </el-form-item>
	            <el-button type="primary" @click="fetchData(1)">查询</el-button>
				<el-button type="primary" @click="clear()">重置</el-button>
	        </el-form>
	    </el-col>
	</el-row>
		<div class="creatList">
			<el-table
			        :data="pageInfo.dtos"
			        v-loading="table_loading"
			        element-table_loading-text="加载中"
			        stripe
			        style="width: 100%">
			    <el-table-column
			            prop="userId"
			            label="用户ID">
			    </el-table-column>
				<el-table-column
				        prop="userName"
				        label="用户名">
				</el-table-column>
				<el-table-column
				        prop="phone"
				        label="手机号">
				</el-table-column>
			    <!-- <el-table-column
			            label="身份"
			            >
						  <template scope="scope">
								<p v-if="scope.row.userIdentity == '6' ">创客</p> -->
								<!-- <p v-if="scope.row.userStat == 'S' ">快捷通审核通过</p>
								<p v-if="scope.row.userStat == 'F' ">快捷通审核失败</p>
								<p v-if="scope.row.userStat == 'P' ">平台审核成功</p>
								<p v-if="scope.row.userStat == 'L' ">平台审核失败</p> -->
						  <!-- </template>
			    </el-table-column> -->
				<el-table-column
				        prop="creTime"
				        label="创建时间">
				</el-table-column>
			   <el-table-column
			           prop="sumIncome"
			           label="累计收益">
			   </el-table-column>
			   <el-table-column
			           prop="offSet"
			           label="当前抵用券">
			   </el-table-column>
	<!-- 		   <el-table-column
			           prop="creTime"
			           label="成为创客时间">
			   </el-table-column> -->
			   <el-table-column
			           label="认证状态"
					   >
					  <template scope="scope">
						  <p v-if="scope.row.openingStatus == '0' ">未提交审核</p>
							<p v-if="scope.row.openingStatus == 'B' ">审核中</p>
							<p style="color: #0066CC;" v-if="scope.row.openingStatus == 'S' ">快捷通审核通过</p>
							<p style="color: red;" v-if="scope.row.openingStatus == 'F' ">快捷通审核失败</p>
							<p style="color: #0066CC;" v-if="scope.row.openingStatus == 'P' ">平台审核成功</p>
							<p style="color: red;" v-if="scope.row.openingStatus == 'L' ">平台审核失败</p>
					   </template>
			   </el-table-column>
			   <el-table-column
			           label="操作">
					   <template scope="scope">
						   <el-button type="primary" size="small"
						              @click="navToDetail(scope.row)">详情
						   </el-button>
					   <!--    <el-button type="danger" size="small"
					                  v-if="scope.row.userStat==1"
					                  @click="quxiao(scope.row.userId,'禁用')">禁用
					       </el-button>
					       <el-button
					               type="success"
					               size="small"
					               v-else
					               @click="quxiao(scope.row.userId,'启用')">启用
					       </el-button> -->
					   </template>
			   </el-table-column>
			</el-table>
			<div class="paginate">
			    <el-pagination
			            @current-change="handleCurrentChange"
			            :current-page="pageInfo.pageNum"
			            :page-size="pageInfo.pageSize"
			            layout="total, prev, pager, next, jumper"
			            :total="pageInfo.count"
			            >
			    </el-pagination>
			</div>
<!-- 			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="用户资料" name="first">管理</el-tab-pane>
				<el-tab-pane label="财富记录" name="second">配置管理</el-tab-pane>
				<el-tab-pane label="交易明细" name="third">角色管理</el-tab-pane>
				<el-tab-pane label="领取红包记录" name="fourth">定时任务补偿</el-tab-pane>
				<el-tab-pane label="发送红包记录" name="six">管理</el-tab-pane>
				<el-tab-pane label="代理记录" name="sevent">配置管理</el-tab-pane>
				<el-tab-pane label="创客统计" name="eight">
					<div>
						<span>财富信息</span>
					</div>
					<el-table :data="moneyDataInfo" border style="width: 100%">
						<el-table-column prop="earnings" label="累计奖励券收益">
						</el-table-column>
						<el-table-column prop="voucher" label="可提现抵用券">
						</el-table-column>
						<el-table-column prop="address" label="操作">
							<template scope="scope">
								<el-button type="primary" size="small" @click="navToEarningsList(scope.row)">收益列表</el-button>
								<el-button type="primary" size="small" @click="navToCashHistory(scope.row)">提现记录</el-button>
							</template>
						</el-table-column>
					</el-table>
					<br>

					<div>
						<span style="font-size: 18px;">邀请记录</span>
					</div>
					<br>
					<div>
						<span style="font-size: 18px;margin-right: 5px;">邀请类型:</span>
						<el-select v-model="value" placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
					<br>
				</el-tab-pane>
			</el-tabs>
		 -->
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeName: 'second',
				moneyDataInfo: [{
					earnings: '789498',
					voucher: '898',

				}],
				value: '',
				options: [{
				          value: '',
				          label: '全部'
				        }, {
				          value: '1',
				          label: '一级创客'
				        }, {
				          value: '2',
				          label: '二级创客'
				        }],
						table_loading: false,
						formInline: {
						    userName:'',
							userId: '',
							userNum: '',
						    userStat:'',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10
						},
						type: '',
						pageInfo: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						formActStatList: [
							{
								value: 'B',
								label: '审核中'
							},
							{
								value: 'L',
								label: '平台拒绝'
							},
							{
								value: 'P',
								label: '平台通过'
							},
							{
								value: 'F',
								label: '快捷通拒绝'
							},
							{
								value: 'S',
								label: '通过'
							}
						]
			}
		},
		created() {
		    document.addEventListener('keydown', this.keyDownFind)
		},
		activated() {
		    this.fetchData(this.pageInfo.pageNum);
		},
		destroyed() {
		    document.removeEventListener('keydown', this.keyDownFind)
		},
		methods: {
			keyDownFind(e) {
			    if (!e) {
			        e = window.event;
			    }
			    if ((e.keyCode || e.which) === 13) {
			         this.fetchData(1)
			    }
			},
			changeType() {
				this.formInline.userId  = ''
				this.formInline.userNum  = ''
				this.formInline.name  = ''
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			navToEarningsList() {
				var vm = this
				console.log('收益列表')
			},
			navToCashHistory() {
				var vm = this
				console.log('提现记录')
			},
			fetchData (page = 1) {
			    this.table_loading = true;
			    this.pageInfo.pageNum = page
			    this.formInline.pageNum = this.pageInfo.pageNum
			    this.formInline[this.type]=this.formInline.name
				console.log(this.formInline, '创客类别')
			    this.dataApi.ajax('markerSelectPage', this.formInline, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
                console.log('返下来的数据',res)
			            this.pageInfo = res
			        }
			    });
			},
			handleCurrentChange(val) {
			   this.fetchData(val)
			},
			/**
			 * 方法说明
			 * author: liuchen
			 * description: 前往创客详情页
			 * @param
			 * @return
			 * @createTime: 2020/7/22
			 */
			navToDetail(data) {
				console.log(data)
				this.$router.push({path:"/user/creator_detail/",query:{id:data.userId,storeId:data.storeId}})
				// this.$router.push('/user/creator_detail/'+id&'storeId'+storeId)
			},
			/**
			 * 方法说明
			 * author: liuchen
			 * description: 查询重置
			 * @param
			 * @return
			 * @createTime: 2020/7/22
			 */
			clear() {
				this.formInline = {
					userName:'',
					userId: '',
					userNum: '',
					userStat:'',
					sort:'CRE_TIME',
					desc:'DESC',
					pageNum:1,
					pageSize: 10
				}
				this.fetchData(1)
			}
		}
	}
</script>

<style>
	.creatList .el-tabs__item {
		font-size: 18px;
	}
</style>
